<template>
	<view class="content">
		<!-- 导航栏适配 -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <u-navbar :is-back="true" title="设置" :background="{ background: '#ffffff' }" :border-bottom="false"
			@click-left="navBack"></u-navbar> -->
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<!-- 非微信小程序导航栏 -->
		<view class="status_bar"></view>
	
		<!-- #endif -->

		<!-- 账号与安全 -->
		<u-cell-group>
			<u-cell-item title="个人资料" @click="Personal" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
			<u-cell-item title="账号与安全" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
		</u-cell-group>

		<view class="gap"></view>
		<u-cell-group>
			<u-cell-item title="未成年模式" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
			<u-cell-item title="关怀模式" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
		</u-cell-group>
		
		<view class="gap"></view>
		<!-- 隐私设置 -->
		<u-cell-group>
			<u-cell-item title="通知" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
			<u-cell-item title="聊天" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
			<u-cell-item title="通用" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
		</u-cell-group>

		<view class="gap"></view>
		<u-cell-group>
			<u-cell-item title="朋友权限" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
			<u-cell-item title="个人信息与权限" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
			<u-cell-item title="个人信息收集清单" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
			<u-cell-item title="第三方信息共享清单" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
		</u-cell-group>
		<view class="gap"></view>
		
		<!-- 帮助与反馈 -->
		<u-cell-group>
			<u-cell-item title="帮助与反馈" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
			<u-cell-item title="关于" :title-style="{ marginLeft: '10rpx' }">
				<u-icon slot="right-icon" name="arrow-right" color="#969799"></u-icon>
			</u-cell-item>
		</u-cell-group>

		<view class="gap"></view>

		<!-- 账号操作区域 -->
		<view class="account-actions">
			<view class="action-item" @click="showAccountActions">
				<text class="action-text">切换账号</text>
			</view>
			<view class="action-item exit-item" @click="showLogoutConfirm">
				<text class="action-text exit-text">退出</text>
			</view>
		</view>

		<!-- 退出登录确认弹窗 -->
		<u-modal v-model="showLogoutModal" title="提示" content="确定要退出登录吗？" confirm-text="退出" cancel-text="取消"
			@confirm="handleLogout"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLogoutModal: false
			};
		},
		methods: {
			Personal(){
				uni.navigateTo({
					url: '/pages/PersonalData/PersonalData'
				});
			},
			// 返回上一页
			navBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 显示账号操作选项
			showAccountActions() {
				// 这里可以实现切换账号的逻辑
				uni.navigateTo({
					url: '/pages/login/login' // 假设登录页也是切换账号的入口
				});
			},

			// 显示退出登录确认弹窗
			showLogoutConfirm() {
				this.showLogoutModal = true;
			},

			// 处理退出登录
			handleLogout() {
				// 实际项目中这里会调用退出登录接口
				uni.showLoading({
					title: '退出中...'
				});

				// 模拟接口请求
				setTimeout(() => {
					uni.hideLoading();
					// 清除用户信息
					uni.removeStorageSync('userInfo');
					uni.removeStorageSync('token');

					// 跳转到登录页
					uni.reLaunch({
						url: '/pages/login/login'
					});

					uni.showToast({
						title: '退出成功',
						icon: 'none'
					});
				}, 1000);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	// 状态栏
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #ffffff;
	}

	// 自定义导航栏（非微信小程序）
	.custom-nav {
		display: flex;
		align-items: center;
		height: 90rpx;
		background-color: #ffffff;
		padding: 0 30rpx;
		border-bottom: 1px solid #f5f5f5;

		.nav-title {
			font-size: 34rpx;
			font-weight: 500;
			flex: 1;
			text-align: center;
		}

		::v-deep u-icon {
			font-size: 36rpx;
			color: #303133;
		}
	}

	// 功能区间距
	.gap {
		height: 10rpx;
		background-color: #f5f5f5;
	}

	// 单元格样式统一
	::v-deep u-cell-group {
		background-color: #ffffff;

		u-cell-item {
			height: 100rpx;
			border-bottom: 1px solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}
		}
	}

	// 账号操作区域样式
	.account-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 30rpx;
		gap: 20rpx; // 两个选项之间的间距
	}

	.action-item {
		width: 100%;
		height: 80rpx;
		background-color: #ffffff;
		border: 1px solid #e5e5e5;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	// 退出按钮特殊样式
	.exit-item {
		border-color: #ff4d4f;
	}

	.action-text {
		font-size: 28rpx;
		color: #333333;
	}

	// 退出文字特殊样式
	.exit-text {
		color: #ff4d4f;
	}
</style>
